<div class="example-container">
  <ul
    cdkRadioGroup
    [disabled]="true"
    class="example-radio-group"
    aria-labelledby="disabled-radio-label"
  >
    <label class="example-label" id="disabled-radio-label">Favorite Fruit (Disabled)</label>
    @for (fruit of fruits; track fruit) {
      <li class="example-radio-button" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
        <span
          class="example-radio-indicator"
          [class.example-radio-checked]="radioButton.pattern.selected()"
        ></span>
        <span>{{ fruit }}</span>
      </li>
    }
  </ul>
  <p><i>The entire radio group is disabled. Focus should not enter the group.</i></p>
</div>
